<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px red solid;
        }
        /* input {
            /* border: 5px yellowgreen solid; */
        /* } */
    </style>
    <title>Document</title>
</head>

<body>
    <div>盒子</div>
    <input type="text" />
    <script>
        // 1. 找到元素 绑定事件，添加逻辑
        const div = document.querySelector('div')
            // 如果写了箭头函数 this 就是 window
            // 用的时候普通的匿名函数，this 就是当前这个 dom 元素
        div.addEventListener('click', function() {
            // console.log(this)
            // css 中的- js 中改为 驼峰命名
            // 修改样式 先点 style，再点样式
            this.style.backgroundColor = '#0094ff'
                // 其他属性直接写即可
            this.innerHTML = '翻滚吧蛋炒饭'
        })
        div.addEventListener('mouseenter', function() {
            console.log('enter')
            this.style.backgroundColor = 'red'
        })
        div.addEventListener('mouseleave', function() {
            console.log('leave')
            this.style.backgroundColor = 'white'
        })

        // 获取输入框
        const ipt = document.querySelector('input')

        // 绑定事件
        // 需求 1：失去焦点之后，如果输入框没有内容，加上红色边框
        // 需求 2：按了回车之后，获取用户输入的内容，弹框提示
        ipt.addEventListener('focus', function() {
            console.log('focus-获取焦点')
        })
        ipt.addEventListener('blur', function() {
            console.log('blur-失去焦点')
            console.log(this.value)
            if (this.value === '') {
                // 加粗边框
                this.style.border = '10px red solid'
            }
        })
        ipt.addEventListener('keydown', function() {
                console.log('keydown-按下')
            })
            // 有事件参数，要用可以获取
        ipt.addEventListener('keyup', function(e) {
            console.log('keyup-松开')
            console.log(e.keyCode)
                // 按了回车
            if (e.keyCode === 13) {
                // 获取输入的内容
                alert(this.value)
                    // 弹框
            }
        })

        // 用户输入内容的时候，判断输入的内容，是否是邮箱
        // 1.用户输入内容的时候（input）
        // 2.判断输入的内容(value)  是否是邮箱(正则表达式)
        // 不是，输入框变红
        // 是，变绿
        ipt.addEventListener('input', function() {
            console.log('input-输入')
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

            if (emailRegex.test(this.value)) {
                // 校验通过
                this.style.backgroundColor = 'green'
            } else {
                // 校验失败
                this.style.backgroundColor = 'red'
            }
            // console.log('input-输入')
        })
    </script>
</body>

</html>